<template>
	<view class="content padding" style="background-color: #FFFFFF;">
		<view style="flex-wrap: wrap;">
			<view :class="[active!=-1?'tab-item':'tab-item-active']" @tap="choice(-1)">全部</view>
			<view :class="[active!=0?'tab-item':'tab-item-active']" @tap="choice(0)">好评({{statistic.level0}})</view>
			<view :class="[active!=1?'tab-item':'tab-item-active']" @tap="choice(1)">中评({{statistic.level1}})</view>
			<view :class="[active!=2?'tab-item':'tab-item-active']" @tap="choice(2)">差评({{statistic.level2}})</view>
			<view :class="[active!=3?'tab-item':'tab-item-active']" @tap="choice(3)">有图({{statistic.imageNum}})</view>
		</view>
		<view style="flex-direction: column;">
			<view v-for="(item,index) in tableList" :key="index">
				<view class="comment-item">
					<view style="align-items: center;">
						<image :src="item.avatar" class="avatar"></image>
						<view class="nickname">{{item.nickname}}</view>
					</view>
					<view style="flex-direction: column;margin-left: 80upx;">
						<view style="color: #555555;margin-top: 10upx;line-height: 40upx;">
							{{item.content}}
						</view>
						<image @tap="preview(item.image)" :src="item.image" class="product-image" mode="aspectFill" v-if="item.image!=''"></image>
						<view style="color: #888888;font-size: 24upx;margin-top: 10upx;">
							{{item.createTime}}
							<view style="margin-left: 30upx;width:300upx ;" class="text_one">
								{{item.skuName}}
							</view>
						</view>
					</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import api from "../../common/api.js";
	import {
		getWithParam_
	} from "../../common/request.js";
	export default {
		data() {
			return {
				active: -1,
				productId: 0,
				index: 1,
				pageSize: 10,
				statistic: {},
				tableList: [],
				loadMore: true
			}
		},
		onLoad(option) {
			this.productId = option.id
			this.initData()
		},
		onReachBottom() {
			if (this.loadMore) {
				this.index = this.index + 1
				var p = {}
				p.productId = this.productId
				if (this.active != -1) {
					p.type = this.active
				}
				this.tableList = []
				getWithParam_(api.COMMENT_LIST, p).then(res => {
					this.tableList = this.tableList.concat(res.data)
				})
			}
		},
		methods: {
			preview(url) {
				var arr = []
				arr.push(url)
				uni.previewImage({
					urls: arr
				})
			},
			choice(i) {
				this.active = i
				this.index = 1
				this.pageSize = 10
				var p = {}
				p.productId = this.productId
				if (i != -1) {
					p.type = i
				}
				this.tableList = []
				getWithParam_(api.COMMENT_LIST, p).then(res => {
					this.tableList = res.data
				})
			},
			initData() {
				getWithParam_(api.COMMENT_STATISTIC, {
					productId: this.productId
				}).then(res => {
					this.statistic = res.data
					getWithParam_(api.COMMENT_LIST, {
						productId: this.productId
					}).then((resp) => {
						if (resp.data == null || resp.data.length < 10) {
							this.loadMore = false
						}
						this.tableList = resp.data
					})
				})
			}
		}
	}
</script>

<style>
	.tab-item {
		color: #555555;
		background-color: #FAEBD7;
		padding: 5upx 20upx;
		border-radius: 10upx;
		margin-left: 20upx;
	}

	.tab-item-active {
		color: #FFFFFF;
		background-color: #FA491E;
		padding: 5upx 20upx;
		border-radius: 10upx;
		margin-left: 20upx;
	}

	.comment-item {
		flex-direction: column;
		margin-top: 10upx;
		border-bottom: 3upx solid #F2F3F5;
		padding: 20upx 0;
		width: 100%;
	}

	.product-image {
		width: 300upx;
		height: 300upx;
		margin-top: 10upx;
	}

	.avatar {
		width: 60upx;
		height: 60upx;
		border-radius: 60upx;
	}

	.nickname {
		color: #555555;
		margin-top: 10upx;
		margin-left: 20upx;
	}
</style>
